<template>
<!--分类考试 start-->
<el-card class="category-card">
  <!-- 头部统一处理加载状态 -->
  <template #header>
    <el-skeleton 
      :loading="loading" 
      animated 
      :throttle="300"
      style="display: inline-block; width: 120px"
    >
      <template #template>
        <el-skeleton-item variant="text" />
      </template>
      <template #default>
        <div class="card-header">
        <img height="16" width="16" src="/images/category.png" alt="分类图标">
        <span>考试分类</span>
      </div>
      </template>
    </el-skeleton>
  </template>

  <!-- 内容区域统一处理加载状态 -->
  <el-skeleton 
    :loading="loading" 
    :count="1" 
    animated 
    :throttle="300"
    class="skeleton-container"
  >
    <template #template>
      <el-row :gutter="20">
        <el-col 
          v-for="(item, index) in 6" 
          :key="index"
          :xs="12" 
          :sm="8" 
          :md="6" 
          :lg="4" 
          :xl="4"
        >
          <div class="skeleton-item">
            <el-skeleton-item variant="image" class="skeleton-icon" />
            <el-skeleton-item variant="h3" class="skeleton-title" />
            <el-skeleton-item variant="text" class="skeleton-text" />
          </div>
        </el-col>
      </el-row>
    </template>

    <template #default>
      <el-row :gutter="20">
        <el-col 
          v-for="(category, index) in categoryItems" 
          :key="index"
          :xs="12" 
          :sm="8" 
          :md="6" 
          :lg="4" 
          :xl="4"
        >
          <div class="category-item">
            <el-image :src="category.icon" fit="cover" class="category-icon" />
            <div class="category-info">
              <h4>{{ category.name }}</h4>
              <p>{{ category.count }}个考试</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </template>
  </el-skeleton>
</el-card>
<!--分类考试 end-->
</template>
<script setup lang="ts">

  const props = defineProps({
    categoryItems: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: true
    }
  })

</script>
<style lang="scss" scoped>
// 定义颜色变量
$primary-color: #409EFF;
$success-color: #67C23A;
$warning-color: #E6A23C;
$danger-color: #F56C6C;
$bg-color: #f5f7fa;
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
// 分类考试 start
/* 骨架屏样式 */
.skeleton-container {
  padding: 12px;

  .skeleton-item {
    text-align: center;
    padding: 12px;
    
    .skeleton-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto 12px;
      border-radius: 8px;
    }
    
    .skeleton-title {
      width: 60%;
      height: 24px;
      margin: 8px auto;
    }
    
    .skeleton-text {
      width: 80%;
      height: 18px;
      margin: 8px auto;
    }
  }
}
.category-card {
    max-width: 1400px;
    margin: 20px auto;
    border-radius: 12px;

    .card-header {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }

    .category-item {
      text-align: center;
      padding: 20px 0;
      transition: all 0.3s ease;
      cursor: pointer;

      &:hover {
        transform: translateY(-5px);

        .category-icon {
          transform: scale(1.05);
        }
      }

      .category-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 15px;
        transition: all 0.3s ease;
      }

      h4 {
        color: $text-primary;
        margin-bottom: 8px;
      }

      p {
        color: $text-secondary;
        font-size: 12px;
      }
    }
  }

  // 分类考试 end
</style>